<template>
  <div class="toggle_btn">
    <div class="middle">
      <div class="center">
        <div v-if="!flag">
          <i class="el-icon-arrow-right"></i>
        </div>
        <div v-else>
          <i class="el-icon-arrow-left"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapState
  } from "vuex";
  export default {
    name: "detail",
    components: {},
    props: {
      flagState: {
        type: Boolean,
        default: true
      },
    },
    data() {
      return {

      };
    },
    methods: {

    },
    computed: {
      ...mapState({
        flag: state => state.ontologyModel.drawerFlag,
      }),
    },
  };
</script>

<style lang="scss">
  .toggle_btn {
    width: 16px;
    display: flex;

    .middle {
      left: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      cursor: pointer;
    }

    .top {
      width: 16px;
      height: 16px;
      background: linear-gradient(-45deg, white 50%, transparent 50%);
    }

    .bottom {
      width: 16px;
      height: 16px;
      background: linear-gradient(-135deg, white 50%, transparent 50%);
    }

    .center {
      width: 16px;
      height: 60px;
      background-color: white;
      box-shadow: -3px 3px 7px rgba(80, 102, 155, 0.28);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>